<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EPUB.js Demo</title>
    <!-- 引入epub需要的依赖的js库 -->
    <script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jszip.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/epub.js') }}"></script>
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #reader-container {
        height: calc(100% - 150px); /* 留出按钮的空间 */
        overflow: hidden;
    }
    #read {
        width: 100%;
        height: 100%;
    }
    #controls {
        width: 100%;
        text-align: center;
        padding: 10px;
        background-color: #f8f9fa;
        position: relative;
    }
</style>
</head>
<body>
<!-- 阅读电子书的内容区 -->
<div id="reader-container">
    <div id="read"></div>
</div>

<!-- 背景颜色和字体颜色调节 -->
<div id="controls">
    背景色: <input type="color" id="backcolor" value="#ffffff" onchange="backcolor()">
    字体颜色: <input type="color" id="textcolor" value="#000000" onchange="backcolor()">
    <br><br>
    <button class="btn btn-primary" id="prevPageBtn">上一页</button>
    <button class="btn btn-primary" id="nextPageBtn">下一页</button>
    <button class="btn btn-primary" id="xiaofont">字体缩小</button>
    <button class="btn btn-primary" id="dafont">字体加大</button>
</div>

<!-- JavaScript 脚本部分 -->
<script>
    var rendition;
    
    document.addEventListener('DOMContentLoaded', () => {
        // 获取电子书路径
        var urlParams = new URLSearchParams(window.location.search);
        var bookPath = urlParams.get('book');

        if (bookPath) {
            // 创建 ePub 实例
            var book = ePub(bookPath);
            var rendition = book.renderTo("read", {
                width: '100%',
                height: '100%'
            });

            // 显示电子书的第一页
            rendition.display();

            // 背景颜色和字体颜色更改函数
            function backcolor() {
                var theme = {
                    name: "custom",
                    style: {
                        body: {
                            color: $("#textcolor").val(),
                            background: $("#backcolor").val(),
                        },
                    },
                };
                rendition.themes.register(theme.name, theme.style);
                rendition.themes.select(theme.name);
            }

            // 字体大小初始值
            var fontsize = 16;

            // 字体加大事件
            document.getElementById("dafont").addEventListener("click", function () {
                fontsize += 1;
                rendition.themes.fontSize(fontsize + "px");
            });

            // 字体减小事件
            document.getElementById("xiaofont").addEventListener("click", function () {
                fontsize -= 1;
                rendition.themes.fontSize(fontsize + "px");
            });

            // 上一页按钮事件
            document.getElementById("prevPageBtn").addEventListener("click", function () {
                rendition.prev();
            });

            // 下一页按钮事件
            document.getElementById("nextPageBtn").addEventListener("click", function () {
                rendition.next();
            });

            // 设置页面显示模式 - 单页或双页
            function setDisplayMode() {
                if (window.innerWidth >= window.innerHeight) {
        // 宽度大于等于高度时，显示双页模式（适合桌面端或者横屏）
                    rendition.spread("always");
                } else {
        // 高度大于宽度时，显示单页模式（适合手机端或竖屏）
                    rendition.spread("none");
                }
}

            // 初始化显示模式
            setDisplayMode();

            // 当窗口大小改变时重新设置显示模式
            window.addEventListener('resize', setDisplayMode);
            
        } else {
            alert("电子书路径无效！");
        }
    });
    function adjustButtonSize() {
    var buttons = document.querySelectorAll(".btn");
    if (window.innerHeight > window.innerWidth) {
        // 高度大于宽度，表示竖屏或移动端
        buttons.forEach(function(button) {
            button.style.padding = "15px 30px"; // 增大按钮的内边距
            button.style.fontSize = "20px";     // 增大按钮的字体大小
        });
    } else {
        // 宽度大于高度，表示横屏或桌面端
        buttons.forEach(function(button) {
            button.style.padding = "10px 20px"; // 恢复默认按钮大小
            button.style.fontSize = "16px";     // 恢复默认按钮字体大小
        });
    }
}

// 初始化调整按钮大小
adjustButtonSize();

// 当窗口大小改变时重新调整按钮大小
window.addEventListener('resize', adjustButtonSize);

</script>
</body>
</html>